<template>
    <div class="GroupChildrenTabs text-black-pk">
        <van-tabs v-model="childrenActive"
                  @click="handleTabs"
                  title-active-color="#D82D11"
                  line-height="0"
                  :swipe-threshold="5"
                  background="#FFFFFF">
            <van-tab :title="'全部('+(allNum ? allNum: 0)+')'" name="0"></van-tab>
            <van-tab :title="'新秀('+(memberNum ? memberNum :0)+')'" name="1"></van-tab>
            <van-tab :title="'屏客('+(screedGuestNum ? screedGuestNum: 0)+')'" name="2"></van-tab>
            <van-tab :title="'屏侠('+(screedManNum ? screedManNum: 0)+')'" name="3"></van-tab>
        </van-tabs>
    </div>
</template>
<script>
    export default {
        name:'GroupChildrenTabs',
        props:{
            allNum: {
                default:""
            },
            memberNum:{
                default: ""
            },
            screedGuestNum:{
                default:""
            },
            screedManNum:{
                default:""
            }

        },
        data(){
            return{
                childrenActive:0,
                roleGrade:"",
            }

        },
        created(){
        },
        methods:{
            handleTabs() {
                this.teamRole();
                this.$emit("change", this.roleGrade)
            },
            /* roleGrade：0=新秀 ,1=屏客,2=屏侠,3=屏宗 4=屏客公益 5=平台账户*/
            teamRole(){
                switch (this.childrenActive) {
                    case "0":
                        this.roleGrade = "";
                        break;
                    case "1":
                        this.roleGrade =0;
                        break;
                    case "2":
                        this.roleGrade = 1;
                        break;
                    case "3":
                        this.roleGrade = 2;
                        break;
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .GroupChildrenTabs {
        background-color: #FFFFFF;
        position: fixed;
        z-index: 1030;
        top: 45px;
        right: 0;
        left: 0;
    }
</style>
